<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>动态导航栏</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="mynav.css">

</head>

<body>
    <div class="wrapper">
        <nav class="mynav">
            <input type="radio" name="tab" id="home" checked>
            <input type="radio" name="tab" id="bug">
            <input type="radio" name="tab" id="envelope">
            <input type="radio" name="tab" id="telegram">
            <input type="radio" name="tab" id="user">
            <label for="home" class="home">
                    <a href="#">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        Home
                    </a>
                </label>
            <label for="bug" class="bug">
                    <a href="#">
                        <i class="fa fa-bug" aria-hidden="true"></i>
                        Bug
                    </a>
                </label>
            <label for="envelope" class="envelope">
                    <a href="#">
                        <i class="fa fa-envelope-open" aria-hidden="true"></i>
                        Envelope
                    </a>
                </label>
            <label for="telegram" class="telegram">
                    <a href="#">
                        <i class="fa fa-telegram" aria-hidden="true"></i>
                        Tellegram
                    </a>
                </label>
            <label for="user" class="user">
                    <a href="#">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        User
                    </a>
                </label>
            <div class="tab"></div>
        </nav>
    </div>
</body>

</html>